<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我喜欢的',
  },
}
</route>

<template>
  <view>
    <z-paging 
      ref="pagingRefs" 
      v-model="dataList" 
      :default-page-size="10"
      :safe-area-inset-bottom="true"
      :refresher-complete-delay="500"
      :auto="false"
      @query="queryList"
    >
      <template #top>
        <!-- 导航 -->
        <!--  #ifdef MP-WEIXIN -->
        <wd-navbar 
          placeholder 
          safeAreaInsetTop 
          :title="themeConfig.title" 
          left-arrow 
          @click-left="back"
        ></wd-navbar>
        <!--  #endif -->
      </template>
      <!-- 个人信息卡片列表 -->
      <view class="w-center pt-20rpx">
        <!-- 骨架屏 -->
        <view class="w-center pt-20rpx" v-if="isFirst">
          <view class="person-item bg-white p-20rpx mb-20rpx"
            :class="[`${themeConfig.theme}-item`]"
            v-for="item in 1" 
            :key="item" 
          >
            <view style="display: flex;">
              <wd-skeleton 
                animation="gradient" 
                :custom-style="{ width: '100%', marginRight: '12px' }" 
                :row-col="[{ width: '100%' }, { width: '50%' }, { width: '30%' }]" 
              />
              <wd-skeleton animation="gradient" :row-col="[{ size: '200rpx', type: 'rect' }]" />
            </view>
            <wd-skeleton 
              animation="gradient" 
              :custom-style="{ marginTop: '12px' }" 
              theme="text" 
            />
          </view>
        </view>
        
        <!-- 加载中 -->
        <view class="flex-center py-50rpx" v-if="!isFirst && loading">
          <wd-loading size="32rpx" color="#9C6DEF" />
        </view>

        <person-item
          v-for="item in dataList"
          :key="item.id"
          :data="item"
          @handleClick="handleClick"
        />
      </view>
    </z-paging>
  </view>
</template>
  
<script lang="ts" setup>
import PersonItem from "@/components/list-item/person-item.vue";
import { useThemeStore, useUserStore } from '@/store';
import { back } from '@/utils';
import { GetUserPage } from "@/service/db_user";

// 主题颜色
const { themeConfig } = useThemeStore();
// 用户信息
const user = useUserStore();
// 行为类型(like:喜欢, collect：收藏, chat:聊天, chated:聊我,viewed：查看我)
const behaviorType = ref('like');
const behaviorTypeList = {
  like: '我喜欢的', 
  collect: '我收藏的', 
  chat: '我联系过的', 
  chated: '联系过我的', 
  viewed: '查看过我的'
}

// 请求payload参数
const pagination = reactive<AnyObj>({});
const dataList = ref([]);
const pagingRefs = ref();
const isFirst = ref(true);
const loading = ref(false);
const queryList = async (pageNo, pageSize) => {
  try {
    loading.value = true;
    const { data } = await GetUserPage(pagination, {
      pageNum: pageNo,
      pageSize,
    });
    loading.value = false;
    const list = data.records || [];
    pagingRefs.value.complete(list);
    isFirst.value = false;
  } catch (error) {
    loading.value = false;
    pagingRefs.value.complete(false);
    isFirst.value = false;
  }
}

const handleClick = (item) => {
  if (!user.isLogined) {
    uni.navigateTo({ url: '/pages/login/index' });
    return
  }
  uni.navigateTo({ 
    url: `/activity/userDetail?id=${item.id}`
  })
}

onLoad((options) => {
  const { type } = options || {};
  behaviorType.value = type;
})

onShow(() => {
  nextTick(() => {
    // 设置页面标题
    themeConfig.title = behaviorTypeList[behaviorType.value];
    
    pagination.behaviorType = behaviorType.value;
    pagingRefs.value.reload();
  })
})
</script>

<style lang="scss" scoped>
</style>
        